



// 入口文件 App.js
const isLogin = true


const articleType = 0

function getArtcleTem(){
  if(articleType === 0){
    return <div>我是无图文章</div>
  }else if(articleType === 1){
    return <div>我是单图文章</div>
  }else if(articleType == 2){
    return <div>我是三图文章</div>
  }
}




function App() {
  return (
    <div className="App">
      {/**
       * 在React中，可以通过逻辑与运算符&&
       * 三元表达式（?:）实现基础的条件渲染
       */
      }
      {/** 逻辑与 &&  来控制显示和隐藏 */}
      {isLogin && <span style={{color:"red"}}>this is true  </span>}
      <br/>
      {/**  三元运算符 */}
      {isLogin?<span>jack</span>:<span>marry</span>}


      {/**
       * 实现复杂的条件渲染
      */}
      {getArtcleTem()}





    </div>





  );
}

export default App;
